<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: lzy
  Date: 2018/9/6
  Time: 13:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Employee</title>
    <script src="http://libs.baidu.com/jquery/1.7.2/jquery.js"></script>
    <script type="text/javascript" src="http://malsup.github.io/min/jquery.blockUI.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //使用blockUI
            $(document).ajaxStart(function () {
                $.blockUI({
                    message: $("#loading"),
                    css: {
                        top: ($(window).height() - 500) / 2 + 'px',
                        left: ($(window).width() - 600) / 2 + 'px',
                        width: '50px',
                        hight: '50px',
                        border: 'none'
                    },
                    overlayCSS: {backgroundColor: '#FFFFFF'}
                })
            }).ajaxStop($.unblockUI);

            //1.获取city，添加change事件
            $("#city").change(function () {
                //2.使#department只保留第一个option子节点
                $("#department option:not(:first)").remove();
                $("#employee option:not(:first)").remove();
                $("#empdetails tr:eq(1) td").empty();
                //3.获取#city选择的值，若该值为""，即选择的是"请选择"，此时不需要发送Ajax请求
                var city = $(this).val();
                //4.若值不为“”，说明的确是city发生了变化，准备Ajax请求
                if (city !== "") {
                    //4.1 url:/employee?method=listDepartment
                    //4.2 args:locationId,time
                    var url = "${pageContext.request.contextPath}/employee?method=listDepartment";
                    var args = {"locationId": city, time: new Date()};
                    //5返回一个json数组
                    $.getJSON(url, args, function (data) {
                        //5.1 若返回的数组中的元素为0：提示“当前城市没有部门”
                        //5.2 若返回的数组中元素不为0：遍历，创建option节点：<option value="departmentId">departmentName</option>并把新创建的option加为#department的子节点
                        if (data === null || data.length === 0) {
                            alert("当前城市没有部门");
                        } else {
                            for (var i = 0; i < data.length; i++) {
                                $("#department").append($("<option value=\"" + data[i].departmentId + "\">" + data[i].departmentName + "</option>"));
                            }
                        }
                    });
                }
            });

            /**
             * 添加employee的菜单逻辑
             */
            $("#department").change(function () {
                $("#employee option:not(:first)").remove();
                $("#empdetails tr:eq(1) td").empty();
                var dep = $(this).val();
                if (dep !== "") {
                    var url = "${pageContext.request.contextPath}/employee?method=listEmployees";
                    var args = {"departmentId": dep, time: new Date()};
                    $.getJSON(url, args, function (data) {
                        if (data === null || data.length === 0) {
                            alert("该部门没有员工");
                        } else {
                            for (var i = 0; i < data.length; i++) {
                                var employeeName = data[i].lastName;
                                var id = data[i].employeeId;
                                $("#employee").append("<option value=\"" + id + "\">" + employeeName + "</option>");
                            }
                        }
                    })
                }
            });

            /**
             * 添加显示员工详细信息
             */
            $("#employee").change(function () {
                $("#empdetails tr:eq(1) td").empty();
                var emp = $(this).val();
                if (emp !== "") {
                    var url = "${pageContext.request.contextPath}/employee?method=getEmployee";
                    var args = {"employeeId": emp, time: new Date()};
                    $.getJSON(url, args, function (data) {
                        if (data === null || data.length === 0) {
                            alert("无此员工详细信息");
                        } else {
                            $("#id").text(data.employeeId);
                            $("#name").text(data.lastName);
                            $("#email").text(data.email);
                            $("#salary").text(data.salary);
                        }
                    })
                }
            })
        })
    </script>
</head>
<body>
<img alt="" id="loading" src="img/timg.gif" style="display: none">
<center>
    <h2 style="color: blue">Employee info search</h2>
    <br/>
    City:
    <select id="city">
        <option value="">请选择...</option>
        <c:forEach items="${requestScope.locations}" var="location">
            <option value="${location.locationId}">${location.city}</option>
        </c:forEach>
    </select>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    Department:
    <select id="department">
        <option value="">请选择...</option>
    </select>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    Employee:
    <select id="employee">
        <option value="">请选择...</option>
    </select>
    <br/>
    <hr/>
    <br/>
    <table id="empdetails" border="1" cellpadding="10" cellspacing="0">
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
        </tr>
        <tr>
            <td id="id"></td>
            <td id="name"></td>
            <td id="email"></td>
            <td id="salary"></td>
        </tr>
    </table>
</center>
</body>
</html>
